import React from 'react';
import {UserAvatars} from './UserAvatars';
import {SearchBox} from './SearchBox';
import {NavigationMenu} from './NavigationMenu';
import {SpacesList} from './SpacesList';
import {useSidebar} from '@/hooks/layout';
import {cn} from '@/lib/utils';

/**
 * 智能侧边栏组件
 * 支持拖拽调整宽度、边界检测触发显示、收起时显示头像
 */
interface SidebarProps {
    value?: string;
    onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export const Sidebar = ({value, onSearchChange}: SidebarProps) => {
    const {
        isCollapsed,
        isResizing,
        shouldShow,
        sidebarRef,
        toggleCollapsed,
        handleResizeStart,
        getSidebarStyles
    } = useSidebar();

    const {className, style} = getSidebarStyles();

    const showContent = !isCollapsed || shouldShow;

    return (
        <aside
                ref={sidebarRef}
                className={className}
                style={style}
            >
                {/* 拖拽右边界 */}
                {!isCollapsed && (
                    <div
                        className={cn(
                            'absolute top-0 right-0 w-1 h-full cursor-col-resize z-50',
                            'hover:bg-blue-500 transition-colors duration-200',
                            isResizing && 'bg-blue-500'
                        )}
                        onMouseDown={handleResizeStart}
                    />
                )}

                <div className="flex flex-col h-full overflow-hidden relative">
                    {/* 用户头像区域 */}
                    <UserAvatars
                        isCollapsed={isCollapsed}
                        isHovered={shouldShow}
                        onToggleCollapsed={toggleCollapsed}
                    />

                    {/* 其他内容区域 */}
                    <div className={cn(
                        'flex flex-col flex-1 w-full min-w-0',
                        'transition-opacity duration-300 ease-in-out',
                        !showContent && 'opacity-0 pointer-events-none'
                    )}>
                        {/* 固定头部区域：搜索框和导航菜单 */}
                        <div className="flex-shrink-0">
                            <SearchBox value={value} onSearchChange={onSearchChange}/>
                            <NavigationMenu/>
                        </div>
                        {/* 可滚动区域：空间列表 */}
                        <div className="flex-1 min-h-0 overflow-hidden">
                            <SpacesList/>
                        </div>
                    </div>
                </div>
            </aside>
    );
};
